<template>
	<div class="loginWrap">
		<div class="login">
			<div class="header cf">
				<img src="@/assets/hmm/1.png" />
			</div>
			<div class="loginContentWrap">
				<div class="loginContent">
					<div class="telPhoneWrap">
						<div class="title">统一登录平台</div>
						<!-- <el-tabs v-model="active">
							<el-tab-pane label="账号登录" name="1"></el-tab-pane>
							<el-tab-pane label="扫码登录" name="2"></el-tab-pane>
						</el-tabs> -->
						<el-tabs v-model="state.active" class="tabs" @tab-click="handleClick">
							<el-tab-pane label="账号登录" name="1"></el-tab-pane>
							<!-- <el-tab-pane label="扫码登录" name="2"></el-tab-pane> -->
						</el-tabs>
						<div class="content" v-show="state.active == 1">
							<!-- <el-form :model="ruleFormTwo" :rules="rulesTwo" ref="ruleFormTwo" class="demo-ruleForm">
							label="账号"
							<el-form-item prop="account">
								<el-input v-model="ruleFormTwo.account" placeholder="请输入账号"></el-input>
							</el-form-item>
							label="密码"
							<el-form-item prop="password">
								show-password="true"
								<el-input
									v-model="ruleFormTwo.password"
									placeholder="请输入密码"
									:type="typassword == false ? 'password' : 'text'"
									@focus="focusFun"
								></el-input>
								<img class="eye" @click="eyeFun(1)" v-if="eyeShow == true && eyeTrue == false" src="@/assets/img/2.png" alt="" />
								<img class="eye" @click="eyeFun(2)" v-if="eyeShow == true && eyeTrue == true" src="@/assets/img/3.png" alt="" />
							</el-form-item>
							<el-form-item class="btn">
								<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoadingTwo" @click="submitForm('ruleFormTwo')">登录</el-button>
							</el-form-item>
						</el-form> -->
							<el-form ref="ruleFormRef" :model="ruleForm" status-icon :hide-required-asterisk="false" :rules="rules" class="demo-ruleForm">
								<el-form-item prop="name">
									<el-input v-model="ruleForm.name" placeholder="请输入账号" />
								</el-form-item>
								<el-form-item prop="pass">
									<!-- <el-input
										v-model="ruleForm.pass"
										:type="state.typassword == false ? 'password' : 'text'"
										@focus="focusFun"
										placeholder="请输入密码"
										show-password
									/>
									<img class="eye" @click="eyeFun(1)" v-if="state.eyeShow == true && state.eyeTrue == false" src="@/assets/hmm/2.png" alt="" />
									<img class="eye" @click="eyeFun(2)" v-if="state.eyeShow == true && state.eyeTrue == true" src="@/assets/hmm/3.png" alt="" /> -->
									<el-input v-model="ruleForm.pass" type="password" @focus="focusFun" placeholder="请输入密码" show-password />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<span>版权归杭州美联数字医疗科技有限公司所有浙ICP备 17034765号-4 浙公网安备 33010802011423号</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// import Account from './account.vue'
// import Mobile from './mobile.vue'
// const state = reactive({
// 	dataListUrl: '/message/sms/platform/page',
// 	deleteUrl: '/message/sms/platform',
// 	queryForm: {
// 		platform: '',
// 		signName: ''
// 	}
// })
const state = reactive({
	active: '1',
	eyeShow: false,
	// eyeShow: true,
	eyeTrue: false,
	typassword: false
	// form: {
	// 	account: '',
	// 	password: ''
	// }
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	name: '',
	pass: ''

	// typassword: true
	//   region: '',
	//   count: '',
	//   date1: '',
	//   date2: '',
	//   delivery: false,
	//   type: [],
	//   resource: '',
	//   desc: '',
})
const rules = reactive<FormRules<RuleForm>>({
	name: [
		{ required: true, message: '请输入账号', trigger: 'blur' }
		// { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	],
	pass: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
		// { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
// 事件
const focusFun = () => {
	state.eyeShow = true
}
const eyeFun = num => {
	if (num == 1) {
		state.eyeTrue = true
		state.typassword = true
	} else {
		state.eyeTrue = false
		state.typassword = false
	}
}
// 登录类型
// const loginType = ref('account')
// const loginSwitch = (type: string) => {
// 	loginType.value = type
// }
</script>

<style lang="scss" scoped>
.loginWrap {
	background: linear-gradient(to right, #e1ecf7, #e7f3ff);
	.login {
		height: 100vh;
		background: url('../../assets/hmm/bgCompany.png') no-repeat center;
		background-size: cover;
		background-position: center;
		.header {
			margin: 0px auto;
			position: relative;
			position: absolute;
			top: 40px;
			left: 60px;
			img {
				display: block;
				height: 32px;
			}
		}
		.loginContentWrap {
			height: 100%;
			position: relative;
			.loginContent {
				width: 450px;
				background: #fff;
				margin: 0 auto;
				font-size: 0;
				position: absolute;
				top: calc(50% + 30px);
				right: 13%;
				transform: translateY(-50%);
				// height: 420px;
				border-radius: 8px;

				.telPhoneWrap {
					// display: inline-block;
					vertical-align: top;
					font-size: 24px;
					color: #6a6a6a;
					padding: 64px;
					position: relative;
					.title {
						color: #1d2129;
						font-weight: 700;
						font-size: 24px;
						margin-bottom: 15px;
					}
					::v-deep(.tabs .el-tabs__nav) {
						width: 100%;
						.el-tabs__active-bar {
							background: #409eff;
						}
						.el-tabs__item {
							font-size: 18px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							// padding-right: 15px;
							&.is-active,
							&:hover {
								font-weight: 700;
								color: #409eff;
							}
						}
					}
					::v-deep(.el-tabs__nav-wrap::after) {
						height: 0;
					}
				}
			}
			.content {
				// padding-right: 20px;
				margin-top: 35px;
				.demo-ruleForm {
					::v-deep(.el-form-item) {
						position: relative;
						padding-bottom: 10px;
						// padding: 5px 0;
						.el-form-item__content {
							// height: 40px;
							// line-height: 40px;
							.el-input__wrapper {
								padding: 5px 11px;
								.el-input__suffix {
									.el-input__validateIcon {
										display: none;
									}
								}
							}
							.el-form-item__error {
								padding: 6px 0 4px;
							}
							.el-button--primary {
								background: #409eff;
								border-color: #409eff;
								color: #fff;
								font-size: 16px;
								width: 100%;
								height: 40px;
								line-height: 40px;
							}
						}
						.eye {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 25px;
							width: 20px;
							height: 20px;
							padding: 10px 5px 10px 15px;
						}
						&.btn {
							// width: 100%;
							margin-top: 40px;
							.el-button {
								width: 100%;
							}
						}
					}
				}
			}
		}
		.footer {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: 1200px;
			text-align: center;
			font-size: 14px;
			color: #4e5969;
		}
	}
}

// @media only screen and (max-width: 992px) {
// 	.login-intro {
// 		display: none;
// 	}
// }
// @media only screen and (max-width: 768px) {
// 	.login-container {
// 		background: #fff;
// 	}
// 	.login-intro {
// 		display: none;
// 	}
// 	.login-form {
// 		flex: 0 1 auto;
// 		border-radius: 0;
// 		box-shadow: none;
// 	}
// 	.login-captcha {
// 		:deep(.el-input) {
// 			width: 150px;
// 		}
// 	}
// }
</style>
